<template>
  <div class="order">
    <div class="tit">饿了么</div>
    <div class="list">
        <div v-for="(item,index) in list" :key="index">{{item}}</div>
    </div>
    <div class="stor" v-for="(item,index) in shopArr" :key="index">
        <div class="shopName">
            <h2>{{item.name}}</h2>
            <span>已送达</span>
        </div>
        <div class="shop">
            <div class="shopImg">
                <img :src="item.pic" alt="">
            </div>
            <div>
                <h3>￥{{item.price}}</h3>
                <p>共{{item.num}}件</p>
            </div>
        </div>
        <div>再来一单</div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:['全部','待消费','待评价','退款'],
            shopArr:[
                {name:'纯手工饺子',pic:'https://img1.baidu.com/it/u=946119111,2649082853&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480',price:17.8,num:2},
                {name:'唐久便利',pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb2b-jiameng.cdn.bcebos.com%2Fonline%2F2021%2F07%2F30%2Fcf798549f6252a7321f8ed75a566d2f4-544351627613223-481%3Fw%3D476%26h%3D476%26s%3D54435&refer=http%3A%2F%2Fb2b-jiameng.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668694698&t=3966735305b48f1c676260488e8236b7',price:18.3,num:3},
                {name:'美益水果',pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.qhimgs3.com%2Ft017daffd32811ec448.jpg&refer=http%3A%2F%2Fp3.ssl.qhimgs3.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668694736&t=68b98c1c22a9187fcb95e9c1b5033d36',price:28.89,num:2}
            ]
        }
    }
}
</script>

<style scoped>
.order{
    background-color: #f5f5f5;
    height: 100%;
}
.tit{
    font-size: 28px;
    width: 100%;
    text-align: center;
    font-weight: bolder;
}
.list{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 10px 0;
}
.stor{
    width: 96%;
    background-color: #fff;
    margin: 10px;
    margin-left: 2%;
}
.stor .shopName{
    display: flex;
    justify-content: space-between;
    
}
.stor .shop{
    display: flex;
    justify-content: space-between;
}
.stor .shop .shopImg{
    width: 20%;
}
.stor .shop .shopImg img{
    width: 100%;
}
</style>